<template>
  <el-dialog :title="title" :visible.sync="dialogFormVisible" width="60%">
    <el-form
      :model="form"
      class="form-inline"
      ref="form"
      label-width="70px"
      size="mini"
    >
      <el-card class="box-card" shadow="never">
        <div slot="header" class="clearfix">
          <span>基本信息</span>
        </div>
        <el-row :gutter="4">
          <el-col :span="24">
            <div style="overflow: hidden; margin: 12px 0">
              <div
                style="
                  width: 2px;
                  height: 14px;
                  float: left;
                  margin-right: 5px;
                  background-color: #1890ff;
                  margin-top: 3px;
                "
              ></div>
              <div style="float: left">投保人信息</div>
            </div>
          </el-col>
          <el-col :span="8"
            ><el-form-item label="投保人" style="width: 100%">
              {{ row.insureName }}
            </el-form-item></el-col
          >
          <el-col :span="8"
            ><el-form-item label="证件类型">
              {{ row.insureCertificateType }}
            </el-form-item></el-col
          >
          <el-col :span="8"
            ><el-form-item style="width: 100%" label="证件号码">
              {{ row.insureCertificateNumber }}
            </el-form-item></el-col
          >
          <el-col :span="24">
            <div style="overflow: hidden; margin: 12px 0">
              <div
                style="
                  width: 2px;
                  height: 14px;
                  float: left;
                  margin-right: 5px;
                  background-color: #1890ff;
                  margin-top: 3px;
                "
              ></div>
              <div style="float: left">被投保人信息</div>
            </div>
          </el-col>
          <el-col :span="8"
            ><el-form-item label="被投保人" style="width: 100%">
              {{ row.insuredName }}
            </el-form-item></el-col
          >
          <el-col :span="8"
            ><el-form-item label="证件类型">
              {{ row.insuredCertificateType }}
            </el-form-item></el-col
          >
          <el-col :span="8"
            ><el-form-item style="width: 100%" label="证件号码">
              {{ row.insuredCertificateNumber }}
            </el-form-item></el-col
          >
          <el-col :span="24">
            <div style="overflow: hidden; margin: 12px 0">
              <div
                style="
                  width: 2px;
                  height: 14px;
                  float: left;
                  margin-right: 5px;
                  background-color: #1890ff;
                  margin-top: 3px;
                "
              ></div>
              <div style="float: left">联系信息</div>
            </div>
          </el-col>
          <el-col :span="8"
            ><el-form-item label="联系人" style="width: 100%">
              {{ row.contactName }}
            </el-form-item></el-col
          >
          <el-col :span="8"
            ><el-form-item label="联系方式">
              {{ row.contactPhone }}
            </el-form-item></el-col
          >
          <el-col :span="24">
            <div style="overflow: hidden; margin: 12px 0">
              <div
                style="
                  width: 2px;
                  height: 14px;
                  float: left;
                  margin-right: 5px;
                  background-color: #1890ff;
                  margin-top: 3px;
                "
              ></div>
              <div style="float: left">货运信息</div>
            </div>
          </el-col>
          <el-col :span="8"
            ><el-form-item label="货物类型" style="width: 100%">
              {{ row.insureGoodsName }}
            </el-form-item></el-col
          >
          <el-col :span="8"
            ><el-form-item label="货物名称" style="width: 100%">
              {{ row.goodsName }}
            </el-form-item></el-col
          >
          <el-col :span="8"
            ><el-form-item label="集装箱号" style="width: 100%">
              {{ row.containerNumber }}
            </el-form-item></el-col
          >
          <el-col :span="8"
            ><el-form-item label="箱数" style="width: 100%">
              {{ row.goodsCount }}
            </el-form-item></el-col
          >
          <el-col :span="8"
            ><el-form-item label="运单号" style="width: 100%">
              {{ row.waybillNumber }}
            </el-form-item></el-col
          >
          <el-col :span="8"
            ><el-form-item label="船次航次" style="width: 100%">
              {{ row.shipNumber }}
            </el-form-item></el-col
          >
          <el-col :span="24">
            <div style="overflow: hidden; margin: 12px 0">
              <div
                style="
                  width: 2px;
                  height: 14px;
                  float: left;
                  margin-right: 5px;
                  background-color: #1890ff;
                  margin-top: 3px;
                "
              ></div>
              <div style="float: left">运输信息</div>
            </div>
          </el-col>
          <el-col :span="8"
            ><el-form-item label="启运地" style="width: 100%">
              {{ row.startPlace }}
            </el-form-item></el-col
          >
          <el-col :span="8"
            ><el-form-item label="目的地" style="width: 100%">
              {{ row.endPlace }}
            </el-form-item></el-col
          >
          <el-col :span="8"
            ><el-form-item label="启运日期" style="width: 100%">
              {{ row.startTime }}
            </el-form-item></el-col
          >
          <el-col :span="24">
            <div style="overflow: hidden; margin: 12px 0">
              <div
                style="
                  width: 2px;
                  height: 14px;
                  float: left;
                  margin-right: 5px;
                  background-color: #1890ff;
                  margin-top: 3px;
                "
              ></div>
              <div style="float: left">扩展保险责任</div>
            </div>
          </el-col>
          <el-col :span="24"
            ><el-form-item label="" style="width: 100%">
              {{ row.insureExtendId }}
            </el-form-item></el-col
          >
          <div style="overflow: hidden; margin: 12px 0">
            <div
              style="
                width: 2px;
                height: 14px;
                float: left;
                margin-right: 5px;
                background-color: #1890ff;
                margin-top: 3px;
              "
            ></div>
            <div style="float: left">费用信息</div>
          </div>
          <el-col :span="8"
            ><el-form-item label="保险金额" style="width: 100%">
              {{ row.feeGoods }}
            </el-form-item></el-col
          >
          <el-col :span="8"
            ><el-form-item label="保险费率" style="width: 100%">
              {{ row.feeRate }}
            </el-form-item></el-col
          >
          <el-col :span="8"
            ><el-form-item label="保险费用" style="width: 100%">
              {{ row.contactPhone }}
            </el-form-item></el-col
          >
          <el-col :span="24">
            <div style="overflow: hidden; margin: 12px 0">
              <div
                style="
                  width: 2px;
                  height: 14px;
                  float: left;
                  margin-right: 5px;
                  background-color: #1890ff;
                  margin-top: 3px;
                "
              ></div>
              <div style="float: left">发票信息</div>
            </div>
          </el-col>
          <el-col :span="8"
            ><el-form-item label="开具发票" style="width: 100%">
              {{ row.invoiceStatus }}
            </el-form-item></el-col
          >
          <el-col :span="8"
            ><el-form-item label="发票类型" style="width: 100%">
              {{ row.invoiceStatus }}
            </el-form-item></el-col
          >
        </el-row>
      </el-card>
      <el-col :span="24"
        ><el-form-item label="备注">
          <el-input
            type="textarea"
            v-model="form.desc"
          ></el-input> </el-form-item
      ></el-col>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogFormVisible = false"
        >确 定</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      title: "查看",
      dialogFormVisible: false,
      isExamine: false,
      form: {
        user: "",
        region: "",
        desc: "",
      },
      row: {},
    };
  },
};
</script>
